<template>
	<view>
		<view class="pjTj spaceBet" v-if="currPage == 'zxsDet'">
			<view class="tjItem">
				<view class="itemCon">
					<text class="score">4.6</text>
					<text class="totalScore">/5</text>
				</view>
				<view class="itemTit">
					<htz-rate v-model="pjScore" :size="22" :gutter="10" :readonly="true" showType="icons" iconName="icon-xingxing" :type="1"></htz-rate>
				</view>
			</view>
			<view class="tjItem">
				<view class="itemCon center">
					<text class="score">231</text>
				</view>
				<view class="itemTit hasCen">参与者</view>
			</view>
			<view class="tjItem hasFlex" @tap="goMorePj">
				<text>查看全部</text>
				<text class="iconfont icon-gengduo"></text>
			</view>
		</view>
		<view class="pjList">
			<view class="listItem">
				<image class="userHead" :src="defHead"></image>
				<view class="listItemCon">
					<view class="itemName spaceBet alignCen">
						<text class="userName">经纬</text>
						<htz-rate v-model="pjScore" :size="19" :gutter="10" :readonly="true" showType="icons" iconName="icon-xingxing" :type="1"></htz-rate>
					</view>
					<view class="pjCon multiEllip clamp3">发送给房东国际饭店冷库国际饭店了发的时间浪费空间广泛的广泛的国际饭店管理浪费分电视剧</view>
					<view class="pjTime">2023-12-23 12:22:30</view>
				</view>
			</view>
			<view class="listItem">
				<image class="userHead" :src="defHead"></image>
				<view class="listItemCon">
					<view class="itemName spaceBet alignCen">
						<text class="userName">经纬</text>
						<htz-rate v-model="pjScore" :size="19" :gutter="10" :readonly="true" showType="icons" iconName="icon-xingxing" :type="1"></htz-rate>
					</view>
					<view class="pjCon multiEllip clamp3">发送给房东国际饭店冷库国际饭店f都是分开的就是飞机的数量付款节点是否了犯得上发生给反对高等级公路打开工具的攻击力了发的时间浪费空间广泛的广泛的国际饭店管理浪费分电视剧</view>
					<view class="pjTime">2023-12-23 12:22:30</view>
				</view>
			</view>
			<view class="listItem">
				<image class="userHead" :src="defHead"></image>
				<view class="listItemCon">
					<view class="itemName spaceBet alignCen">
						<text class="userName">经纬</text>
						<htz-rate v-model="pjScore" :size="19" :gutter="10" :readonly="true" showType="icons" iconName="icon-xingxing" :type="1"></htz-rate>
					</view>
					<view class="pjCon multiEllip clamp3">发送给房东国际饭店冷库国际饭店f都是分开的就是飞机的数量付款节点是否了犯得上发生给反对高等级公路打开工具的攻击力了发的时间浪费空间广泛的广泛的国际饭店管理浪费分电视剧</view>
					<view class="pjTime">2023-12-23 12:22:30</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currPage:{
				type:String,
				default:'pjList'
			}
		},
		data(){
			return{
				pjScore:3,
				defHead:this.defHead
			}
		},
		methods:{
			goMorePj(){
				uni.navigateTo({
					url:'/pages/subSqIndex/xlzx/zxsPj'
				})
			}
		}
	}
</script>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	$grayCol:#8f91af;
	.comFont{
		font-family: 'Staatliches';
	}
	.center{
		text-align: center;
	}
	.pjTj{
		border-bottom: 2rpx solid #E1DEF9;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
		.tjItem{
			flex: 1;
			align-items: center;
			.score,
			.totalScore{
				@extend .comFont;
			}
			.score{
				color: $sq-main0;
				font-size: 56rpx;
			}
			.itemTit{
				font-size: 26rpx;
				color:$grayCol;
				&.hasCen{
					@extend .center;
				}
			}
			&.hasFlex{
				justify-content: flex-end;
				font-size: 26rpx;
				color:$grayCol;
				.icon-gengduo{
					font-size: 20rpx;
					margin-left: 5rpx;
				}
			}
		}
	}
	.listItem{
		display: flex;
		margin-bottom: 20rpx;
		.userHead{
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 15rpx;
		}
		.listItemCon{
			flex: 1;
			border-bottom: 1rpx solid #E1DEF9;
			padding-bottom: 20rpx;
			.itemName,
			.pjCon{
				margin-bottom: 10rpx;
			}
			.userName{
				font-size: 28rpx;
				color: $sq-main0;
				font-weight: 600;
			}
			.pjCon{
				font-size: 26rpx;
				color: $sq-main0;
			}
			.pjTime{
				text-align: right;
				font-size: 24rpx;
				color: $grayCol;
			}
		}
		&:last-child{
			margin-bottom: -20rpx;
			.listItemCon{
				border-bottom: none;
			}
		}
	}
</style>